<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="./script/rem.js"></script>
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <script type="text/javascript" src="./script/jquery.min.js"></script>
  <script type="text/javascript" src="./script/jquery.min.js"></script>
  <script type="text/javascript" src="./script/aui-slide.js"></script>
  <script type="text/javascript" src="./script/jquery.min.js"></script>
  <script type="text/javascript" src="./script/doT.min.js"></script>
  <script type="text/javascript" src="./script/base.js"></script>
  <script type="text/javascript" src="./script/api.js"></script></head>
  <script type="text/javascript" src="./script/aui-tab.js" ></script>
  <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
</head>
<body>

  <header class="head" style="padding-top:0.4rem;">
    <div class="head-l" tapmode onclick="closeWin()"><i class="fa fa-angle-left"></i></div>
    <h3>我的邀请</h3>
    <div class="head-r"></div>
  </header>
  <div class="head-d" style="padding-top:0.4rem;"></div>

  <ul class="user-invite-t mb20" id="sort">
    <li id="hasConfirm" onclick="changeType(0);">已确认</li>
    <li id="notConfirm" onclick="changeType(1);">待确认</li>
  </ul>

  <ul class="user-invite-item" id="list">

<!--         <li>
            <dl>
                <dt>
                    <img src="image/gril.png" class="user-invite-item-img">
                    张春华
                    <img src="image/user-invite-level.png" class="user-invite-leve">
                </dt>
                <dd>手机号：564878788784</dd>
                <dd>注册时间：2018-02-05     20：21</dd>
            </dl>
            <div class="user-invite-item-r">
                <span class="btn-1 mb20" tapmode onclick="user_invite_uplevel()">升级</span>
                <span class="btn-2" tapmode onclick="user_invite_recharge()">为他充值</span>
            </div>
          </li> -->

        </ul>

      </body>
      <script type="text/javascript" src="./script/api.js"></script>
      <script type="text/javascript" src="./script/index.js"></script>
      <script type="text/template" id="template">
        {{~it:value:index}}
        <li>
          <dl>
            <dt>
              <img src="{{=value.avatar}}" class="user-invite-item-img">
              {{=value.name}}
              {{? value.level == 1}}
              <img src="image/user-invite-level-111.png" class="user-invite-leve">
              {{?? value.level == 2}}
              <img src="image/user-invite-level-222.png" class="user-invite-leve">
              {{?? value.level == 3}}
              <img src="image/user-invite-level-333.png" class="user-invite-leve">
              {{?? value.level == 4}}
              <img src="image/user-invite-level-444.png" class="user-invite-leve">
              {{?? }}
              {{?}}
            </dt>
            <dd>手机号：{{=value.phone}}</dd>
            <dd>注册时间：{{=value.register_at}}</dd>
          </dl>
          <div class="user-invite-item-r">
            {{? value.upgrade_state == 1}}
            <span class="btn-1 mb20" tapmode onclick="user_invite_uplevel('{{=value.id}}')">升级</span>
            {{?}}
            <span class="btn-2" tapmode onclick="user_invite_recharge('{{=value.id}}','{{=value.level_integral}}')">为他充值</span>
          </div>
        </li>
        {{~}}
      </script>
      <script type="text/javascript">

        apiready = function(){
          type = 0;
          changeType(type);
          loadData();
          reloadListener();
          pullLoading();
        }

        function loadData(more){
            // 进度提示框
            api.showProgress({
              title: '努力加载中...',
              text: '请稍等...',
              modal: false
            });

            if (more) {
              page += 1;
            }else{
              page = 1;
            }

            var token = $api.getStorage('token');
            api.ajax({
              url: webAddress + '/api/user/list/invite',
              method: 'get',
              data: {
                values: {
                  page: page,
                  row: row,
                  type: type,
                },
              },
              headers: {
                Authorization: 'Bearer ' + token,
                Accept: 'application/json',
              },
            },function(ret, err){
              if (ret) {
        // alert( JSON.stringify( ret ) );
            // 关闭上拉加载控件
            api.hideProgress();
            // 关闭下拉刷新控件
            // api.refreshHeaderLoadDone();
            if (ret.data) {
              if (more) {
                templateFun(ret.data,1);
              }else{
                templateFun(ret.data);
              }
            }
          } else {
              // alert( JSON.stringify( err ) );
            }
          });
          }

    // 模板赋值函数
    function templateFun(data,more){

      var template = $api.byId('template');
      var dotFn = doT.template(template.innerHTML);
      var html = dotFn(data);
      var list = $api.byId('list');
      
      if (more) {

        if (data.length) {

          $api.append(list, html);
        }else{

         api.toast({
          msg: '没有更多了',
          duration: 2000,
          location: 'bottom'
        });
         return; 
       }
     }else{
      if (data.length) {
       $api.html(list, html);
     }else{
      var html = '<h2 style="padding:1rem; text-align:center; color:#999; font-size:0.5rem;">暂无内容</h2>';
      list.innerHTML = html;
    }
  }
}

    // 切换分类
    function changeType(typee){
      type = typee;
      if (type) {
        $('#sort li').removeClass('active');
        $('#notConfirm').addClass('active');
        loadData();
      }else{
        $('#sort li').removeClass('active');
        $('#hasConfirm').addClass('active');
        loadData();
      }

    }

    // 上拉加载
    function pullLoading(){
      api.addEventListener({
        name: 'scrolltobottom',
        extra: {
          threshold: 0
        }
      }, function(ret, err){
        loadData(1);
      });
    }
    
    // 为他升级
    function user_invite_uplevel(id) {
      api.openWin({
        name: 'user_invite_uplevel',
        url: './user_invite_uplevel.html',
        pageParam:{
          id: id,
        }
      });
    }

    // 为他充值
    function user_invite_recharge(id,level_integral) {
      api.openWin({
        name: 'user_invite_recharge',
        url: './user_invite_recharge.html',
        pageParam:{
          id: id,
          level_integral:level_integral,
        }
      });
    }

    // 监听事件 (页面刷新)
    function reloadListener() {
      api.addEventListener({
        name: 'reload',
      }, function(ret, err) {
        loadData();
      });
    }

    function closeWin(){
      api.closeWin({
      });
    }
  </script>
  </html>